import 'package:flutter/material.dart';

///
/// CustomScrollView
/// CustomScrollView允许您直接提供slivers以创建各种滚动效果，
/// https://api.flutter-io.cn/flutter/widgets/CustomScrollView-class.html
///
/// SliverList，列表 item高度可变的
/// SliverFixedExtentList，这是一个更高效的条子，它显示沿滚动轴高度固定的列表
/// SliverPrototypeExtentList  根据原型生成高度固定的列表
///
/// SliverGrid，这是一个显示 2D 子数组的条子。
///
/// SliverFillViewport 包含多个子组件，每个都可以填满屏幕（PageView）
///
/// SliverPadding，这是一个在另一个条子周围添加空白空间的条子。
/// SliverVisibility、SliverOpacity
///
///
/// SliverAppBar，它是一个显示标题的条子，可以在滚动视图滚动时展开和浮动。
/// ScrollNotification和NotificationListener，可用于在不使用ScrollController的情况下观察滚动位置。
/// IndexedSemantics，它允许使用滚动公告的索引来注释子列表。
///
class CustomScrollViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: getCustomSrollView01()
    );
  }
}

getCustomSrollView01() {

  return CustomScrollView(
    slivers: <Widget>[
       SliverAppBar(
        pinned: true,
        expandedHeight: 250.0,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('Demo'),
          background:
          Image.network("https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF",
            fit: BoxFit.cover,),
        ),
      ),
      SliverGrid(
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 4.0,
        ),
        delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.teal[100 * (index % 9)],
              child: Text('Grid Item $index'),
            );
          },
          childCount: 20,
        ),
      ),
      SliverFixedExtentList(
        itemExtent: 50.0,
        delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlue[100 * (index % 9)],
              child: Text('List Item $index'),
            );
          },
        ),
      ),
    ],
  );
}
